<template>
  <el-tabs type="border-card" v-model="activeName">
    <el-tab-pane label="看房流程" name="0">
      <el-table
        :data="kfData"
        style="width: 100%;">
        <el-table-column
          prop="watchTime"
          label="申请时间">
        </el-table-column>
        <el-table-column
          prop="realName"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系方式">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" v-if="scope.row.process==0" @click="jskf(scope.row)">结束看房</el-button>
            <el-button type="text" size="small" v-if="scope.row.process>=1">已经看房</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="竞标流程" name="1">
      <el-table
        :data="jbData"
        style="width: 100%;">
        <el-table-column
          prop="watchTime"
          label="申请时间">
        </el-table-column>
        <el-table-column
          prop="realName"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系方式">
        </el-table-column>
        <el-table-column
          prop="auditBail"
          label="保证金状态">
        </el-table-column>
        <el-table-column
          prop="auditDocument"
          label="标书状态">
        </el-table-column>
        <el-table-column
          prop="amount"
          label="出价状态">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="lookbs(scope.$index, scope.row)">标书</el-button>
            <el-button type="text" size="small" v-if="scope.row.auditDocument==='已审核'"
                       @click="lookbzj(scope.$index, scope.row)">保证金
            </el-button>
            <el-button type="text" size="small" v-if="scope.row.win===false&& scope.row.process===5"
                       @click="bid1(scope.$index, scope.row)">夺魁
            </el-button>
            <el-button type="text" size="small" v-if="scope.row.win===true" @click="duokui(scope.row)">已夺魁</el-button>
            <el-button type="text" size="small" v-if="scope.row.win===false&& scope.row.process>13"
                       @click="jincheng(scope.row)">进程
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="查看标书" :visible.sync="dialogFormbs">
        <el-form :model="formbs" style="width:  80%">
          <el-form-item label="姓名 :" label-width="20%">
            <el-input v-model="formbs.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号 :" label-width="20%">
            <el-input v-model="formbs.phone"></el-input>
          </el-form-item>
          <el-form-item label="家庭人数 :" label-width="20%">
            <el-input v-model="formbs.familySize"></el-input>
          </el-form-item>
          <el-form-item label="婚姻情况 :" label-width="20%">
            <el-input v-model="formbs.maritalStatus"></el-input>
          </el-form-item>
          <el-form-item label="兴趣爱好 :" label-width="20%">
            <el-input v-model="formbs.hobby"></el-input>
          </el-form-item>
          <el-form-item label="宗教信仰 :" label-width="20%">
            <el-input v-model="formbs.religious"></el-input>
          </el-form-item>
          <el-form-item label="从事工作 :" label-width="20%">
            <el-input v-model="formbs.work"></el-input>
          </el-form-item>
          <el-form-item label="购房用途 :" label-width="20%">
            <el-input v-model="formbs.purpose"></el-input>
          </el-form-item>
          <el-form-item label="付款时间 :" label-width="20%">
            <el-input v-model="formbs.payTime"></el-input>
          </el-form-item>
          <el-form-item label="付款方式 :" label-width="20%">
            <el-input v-model="formbs.payWay"></el-input>
          </el-form-item>
          <el-form-item label="其他信息 :" label-width="20%">
            <el-input v-model="formbs.otherMsg"></el-input>
          </el-form-item>
          <el-form-item label="身份证图片 :" label-width="20%">
            <img :src="imgs[0]" class="img">
          </el-form-item>
          <el-form-item label="身份证图片 :" label-width="20%">
            <img :src="imgs[1]" class="img">
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" v-if="this.qaq2==='未审核'" @click="shbs()">审核通过</el-button>
          <el-button @click="dialogFormbs = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormbs = false">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="查看保证金" :visible.sync="dialogFormbzj">
        <el-form :model="formbzj" style="width:  80%">
          <el-form-item label="保证金 :" label-width="20%">
            <img :src="formbzj.img" class="img">
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" v-if="formbzj.auditBail==='未审核'" @click="shbzj()" >审核通过</el-button>
          <el-button @click="dialogFormbzj = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormbzj = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="线下流程" name="2" v-if="qaq">
      <el-col :span="24" style="text-align: center">
        <el-steps :active="active" align-center>
          <el-step title="步骤1" description="资金监管(还贷注销)"></el-step>
          <el-step title="步骤2" description="不动产过户(交税)"></el-step>
          <el-step title="步骤3" description="领证(解冻资金)"></el-step>
          <el-step title="步骤4" description="物业交割"></el-step>
          <el-step title="步骤5" description="确认完成交易/评论"></el-step>
          <el-step title="步骤6" description="尾款支付/佣金支付"></el-step>
          <el-step title="步骤7" description="完成购房"></el-step>
        </el-steps>
        <el-col :span="24" style="text-align: center">
          <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
        </el-col>
      </el-col>

    </el-tab-pane>
    <el-tab-pane label="退款流程" name="3" v-if="qaq1">
      <el-steps :active="active1" align-center>
        <el-step title="步骤1" description="退款中"></el-step>
        <el-step title="步骤2" description="退款完成"></el-step>
      </el-steps>
      <el-col :span="24" style="text-align: center">
        <el-button style="margin-top: 12px;" @click="next1">下一步</el-button>
      </el-col>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import ElTabPane from "element-ui/packages/tabs/src/tab-pane";
  import {getbsid, auditbs, bidid, userjc, auditbzj, upjc} from "@/api/scheduleApi";
  import {ckjd} from "@/api/matterApi";

  export default {
    components: {ElTabPane},
    data() {
      return {
        active: 0,
        active1: 0,
        activeName: '1',
        qaq: false,
        qaq1: false,
        dialogFormbs: false,
        dialogFormbzj: false,
        biaoshu: '',
        biaoshu1: '',
        jindu: '',
        jcid: '',
        jcjd: '',
        jcid1: '',
        jcjd1: '',
        imgs: [],
        formbs: {},
        qaq2:'',
        formbzj: {
          img: '',
          auditBail:'',
        },
        kfData: [],
        jbData: [],
      }
    },
    methods: {
      getseschedule() {
        this.kfData=[];
        this.jbData=[];
        let data={commodityid:this.$route.query.id};
        ckjd(data).then((res)=>{
          this.kfData = res.data.data;
          if(res.data.data!=null){
            res.data.data.forEach((value) => {
              if(value.auditBail===true){
                value.auditBail='已审核'
              }
              if(value.auditBail===false){
                value.auditBail='未审核'
              }
              if(value.auditDocument===false){
                value.auditDocument='未审核'
              }
              if(value.auditDocument===true){
                value.auditDocument='已审核'
              }
              if (value.process >= 2) {
                this.jbData.push(value);
              }
            })
          }
        })
      },
      lookbs(index, row) {
        this.qaq2=row.auditDocument;
        this.biaoshu = row.documentId;
        let data = {documentid: this.biaoshu};
        getbsid(data).then((res) => {
          if (res.data.data !== null) {
            this.formbs = res.data.data;
            if(res.data.data.identityImg!=null){
              this.imgs=(res.data.data.identityImg).split(",");
            }
            this.dialogFormbs = true;
          } else {
            this.$message({
              message: '还没有标书',
              type: 'warning'
            });
          }
        })
      },
      lookbzj(index, row) {
        this.jindu = row.id;
          this.formbzj.img = row.bailImage;
        this.formbzj.auditBail = row.auditBail;
        this.dialogFormbzj = true;
      },
      shbs() {
        let data = {documentid: this.biaoshu};
        this.$confirm('此操作将永久审核通过, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          auditbs(data).then((res) => {
            this.getseschedule();
            this.dialogFormbs = false;
            this.$message({
              type: 'success',
              message: '审核通过!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });

      },
      shbzj() {
        let data = {scheduleid: this.jindu};
        this.$confirm('此操作将永久审核通过, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          auditbzj(data).then((res) => {
            this.getseschedule();
            this.dialogFormbzj = false;
            this.$message({
              type: 'success',
              message: '审核通过!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      bid1(index, row) {
        let data = {scheduleid: row.id};
        this.$confirm('此操作将永久夺魁, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bidid(data).then((res) => {
            this.getseschedule();
            this.$message({
              type: 'success',
              message: '夺魁成功!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      jincheng(row) {
        this.jcid = row.id;
        this.jcjd = row.process;
        this.qaq1 = true;
        this.activeName = '3';
        this.qaq = false;
        this.active1 = this.jcjd - 13;

      },
      duokui(row) {
        this.jcid1 = row.id;
        this.jcjd1 = row.process;
        this.qaq = true;
        this.activeName = '2';
        this.qaq1 = false;
        this.active = row.process - 6;

      },
      jskf(row) {
        let data = {scheduleid: row.id};
        upjc(data).then((res) => {
          this.getseschedule();
        })
      },
      next() {
        if(this.active>=0 && this.active<=6){
          let data={scheduleid:this.jcid1};
          this.$confirm('此操作将永久下一步, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            upjc(data).then((res)=>{
               this.$router.push({name: 'subjectMatter'});
              this.$message({
                type: 'success',
                message: '完成下一步!'
              })
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }else{
            this.$message({
              type: 'info',
              message: '进度不在范围'
            });
        }
      },
      next1() {
        if(this.active1>=1 && this.active1<2){
          let data={scheduleid:this.jcid};
          this.$confirm('此操作将永久下一步, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            upjc(data).then((res)=>{
              this.$router.push({name: 'subjectMatter'});
              this.$message({
                type: 'success',
                message: '完成下一步!'
              })
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }else{
          this.$message({
            type: 'info',
            message: '进度不在范围'
          });
        }
      },

    },
    mounted() {
      this.getseschedule();
    }
  }
</script>

<style>
  .img {
    width: 450px;
    height: 300px;
  }


</style>
